<template>
  <el-form
    class="login-form"
    :rules="loginRules"
    ref="loginForm"
    :model="loginForm"
    label-width="0"
  >
    <h1>登录您的AiHuman数智人平台</h1>
    <!-- <el-form-item v-if="tenantMode" prop="tenantId">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.tenantId"
                auto-complete="off"
                :placeholder="$t('login.tenantId')">
        <i slot="prefix" class="icon-quanxian"/>
      </el-input>
    </el-form-item> -->
    <el-form-item prop="username">
      <el-input
        @keyup.enter.native="handleLogin"
        v-model.trim="loginForm.username"
        auto-complete="off"
        :placeholder="$t('login.username')"
      >
        <i slot="prefix" class="icon-yonghu" />
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        size="small"
        @keyup.enter.native="handleLogin"
        :type="passwordType"
        v-model="loginForm.password"
        auto-complete="off"
        :placeholder="$t('login.password')"
      >
        <i
          class="el-icon-view el-input__icon"
          slot="suffix"
          @click="showPassword"
        />
        <i slot="prefix" class="icon-mima" />
      </el-input>
    </el-form-item>
    <el-form-item v-if="frontParam.captcha !== 'no'" prop="validateValue">
      <el-row :span="24">
        <el-col :span="16">
          <el-input
            size="small"
            @keyup.enter.native="handleLogin"
            v-model="loginForm.validateValue"
            auto-complete="off"
            :placeholder="$t('login.code')"
          >
            <i slot="prefix" class="icon-yanzhengma" />
          </el-input>
        </el-col>
        <el-col :span="8">
          <div class="login-code">
            <img
              :src="loginForm.image"
              class="login-code-img"
              @click="refreshCode"
            />
          </div>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item style="margin-bottom: 20px;margin-top: 60px">
      <el-button
        type="primary"
        round
        @click.native.prevent="handleLogin"
        class="login-submit"
      >{{ $t("login.submit") }}
      </el-button>
    </el-form-item>

    <LicenseModel
      :title="LicenseTitle"
      :isShow.sync="isShow"
      :paramData="lsData"
      @successFun="lsSuccessFun"
      @cancelFun="refreshCode"
    ></LicenseModel>
  </el-form>
</template>

<script>
import LicenseModel from "@/views/license/index.vue";
import loginFormMixin from "../mixin/loginFormMixin";

export default {
  name: "userlogin",
  mixins: [loginFormMixin],
  components: {
    LicenseModel,
  },
};
</script>

<style lang="scss" scoped>
.login-form {
  padding: 0 15%;

  /deep/h1 {
    margin: 0;
    font-weight: normal;
    font-size: 28px;
    color: #333333;
    line-height: 1em;
    padding-bottom: 40px;
  }

  i {
    color: #000;
  }

  /deep/.el-form-item__content {
    width: 100%;
  }

  /deep/.el-form-item {
    margin-bottom: 40px;

    .el-form-item__error {
      font-size: 14px;
    }
  }

  /deep/.el-input {
    //font-size: 16px;

    input {
      padding-bottom: 2px;
      padding-left: 40px;
      text-indent: 5px;
      border: none;
      background: transparent;
      border-radius: 0;
      color: #000;
      border-bottom: 1px solid #c7cad3;
      font-size: 16px;

      //&::placeholder {
      //  color: #605453;
      //}
    }
    input:-webkit-autofill {
      transition: background-color 5000s ease-in-out 0s;
    }

    .el-input__prefix {
      i {
        padding: 0 5px;
      }
    }
    i {
      font-size: 20px !important;
    }
  }
}
.login-code {
  margin: 0 0 0 10px;
}

.login-code-img {
  margin-top: 2px;
  width: 100px;
  height: 38px;
  background-color: #fdfdfd;
  border: 1px solid #f0f0f0;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 5px;
  line-height: 38px;
  text-indent: 5px;
  text-align: center;
  cursor: pointer !important;
}

.login-submit {
  height: 60px;
  width: 100%;
  text-align: center;
  //line-height: 60px;
  font-size: 24px;
  border-radius: 30px;
  background: linear-gradient(225deg, rgba(247, 68, 6, 0.87), rgba(183, 7, 11, 0.87)) #e74019;
  color: #fff;
  border: none;

  &:hover {
    opacity: 0.8;
  }
}
</style>
